<template>
	<view class="pro_banner">
		<!-- 商品banner图 -->
		<view class="top_banner">
			<swiper class="swiper" indicator-active-color="#ffffff" indicator-color="rgba(255, 255, 255, .5)" @change="changeNum">
				<swiper-item>
					<image class="pic" :src="productDetail.cover" mode="" @tap="previewImage()" :lazy-load="true"></image>
				</swiper-item>
			</swiper>
		</view>
		<!-- 积分 库存 -->
		<view class="goods">
			<view class="">
				<view>{{productDetail.name}}</view>
				<view class="title2">{{productDetail.brief}}</view>
				<view class="integral_num">{{productDetail.price}} <text> 积分</text></view>
			</view>
			<view class="goods_right">库存{{productDetail.stock}}份</view>
		</view>
		<!-- 商品详情 -->
		<view class="goods_detail">
			<view class="goods_detail_1">商品详情</view>
			<view class="goods_detail_2" v-for="(item,index) in productDetail.sttr" :key="index">{{item.label}}：{{item.value}}</view>
			<!-- <view v-html="detail_pic" class="goods_detail_pic"></view> -->
			<rich-text :nodes="detail_pic"></rich-text>
		</view>
		<!-- 底部按钮 -->
		<view class="bottom">
			<view class="bottom_left">
				<view class="customerService" @tap="toservice">
					<image :src="Url+'mine/index/customer_service.png'" mode="widthFix"></image>
					客服
				</view>
			</view>
			<view class="bottom_right" @tap="submitOrder">
				立即兑换
			</view>
		</view>
		<!-- 联系客服弹窗 -->
		<uni-customer ref='customer'></uni-customer>
	</view>
</template>

<script>
	import {
		integralOrder
	} from '@/common/productdetail.js';
	import uniCustomer from '@/components/customerService/customer_service.vue'
	export default {
		components: {
			uniCustomer
		},
		props: ['productDetail', 'detail_pic'],
		data() {
			return {
				Url: this.Imgurl,
				pic_current: 1,
				banner_num: '1',
			}
		},
		methods: {
			//预览轮播图
			previewImage: function() {
				// var i = this.productDetail.cover; 
				var i = [this.productDetail.cover] //获取当前页面的轮播图数据
				//uniapp预览轮播图
				uni.previewImage({
					current: 1, //预览图片的下标
					urls: i //预览图片的地址，必须要数组形式，如果不是数组形式就转换成数组形式就可以
				})
			},
			changeNum(e) {
				// console.log(e.detail)
				this.pic_current = e.detail.current + 1
			},
			submitOrder() {
				// console.log(this.productDetail)
				let params = {
					id: this.productDetail.id,
				}
				// console.log(params)
				integralOrder(params).then(res => {
					// console.log(res)
					if (res.code == 1) {}
					let pa = {
						type: 2,
						...params
					}
					let data = JSON.stringify(pa);
					if (res.code == 1) {
						uni.navigateTo({
							url: '/pageB/order/confirmorder?data=' + data
						});
					} else if (res.code == 4) {
						this.$emit('login')
					} else {
						this.toast(res.msg)
					}
				}).catch()
			},
			// 联系客服
			toservice() {
				this.$refs.customer.show = true;
			},
		}
	}
</script>

<style scoped >
	.top_banner {
		position: relative;
		width: 100%;
		height: 750upx;
	}

	.top_banner .pic_num {
		position: absolute;
		bottom: 20upx;
		right: 30upx;
		border: 2upx solid #999;
		padding: 4upx 16upx;
		font-size: 28upx;
		color: #fff;
		background: #2C2C2C;
		border-radius: 25upx;
		opacity: 0.4;
	}

	.swiper {
		position: relative;
		width: 100%;
		height: 100%;
	}

	.swiper .pic {
		width: 100%;
		height: 100%;
	}

	.goods {
		position: relative;
		background: #fff;
		padding: 30upx 30upx;
		border-bottom: 20upx solid #F9F9F9;
		font-size: 36upx;
	}

	.goods .title2 {
		margin-top: 10upx;
		font-size: 30upx;
		color: #999;
		width: 80%;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	.goods .goods_price {
		margin-top: 10upx;
		color: red;
		font-size: 26upx;

	}

	.goods .goods_price text {
		font-size: 32upx;
		font-weight: 700;
	}

	.goods .integral_num {
		color: red;
		margin-top: 15upx;

	}

	.goods .integral_num text {
		font-size: 30upx;
		padding-left: 6upx;
	}

	.goods .goods_right {
		position: absolute;
		right: 30upx;
		bottom: 30upx;
		font-size: 26upx;
		color: #999;
	}

	// 商品详情
	.goods_detail {
		padding: 30upx;
		background-color: #fff;
		font-size: 36upx;
	}

	.goods_detail .goods_detail_2 {
		font-size: 28upx;
		color: #999;
		margin: 12upx 0;
	}

	.goods_detail image {
		margin: 12upx 0 0;
		width: 100%;
	}

	// 底部按钮
	.bottom {
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100%;
		padding: 10upx 30upx;
		background-color: #FFFFFF;
		display: flex;
		justify-content: space-between;
		align-items: flex-end;
	}

	.bottom .bottom_left {
		flex: 1;
		display: flex;
	}

	.bottom .bottom_left .relay,
	.customerService {
		padding: 10upx 15upx;
		flex: 1;
		font-size: 26upx;
		display: flex;
		flex-direction: column;
		justify-content: space-around;
		align-items: center;
		color: #999;
	}

	.bottom .bottom_left .relay,
	.customerService image {
		width: 40upx;
		height: 40upx;
		margin-bottom: 10upx;
	}

	.bottom .bottom_right {
		width: 600upx;
		height: 100upx;
		line-height: 100upx;
		border-radius: 25upx;
		overflow: hidden;
		background: #FF2741;
		text-align: center;
		margin-left: 6upx;
		color: #fff;
		font-size: 30upx;
	}
</style>
<style>
	page {
		background-color: #fff;
		min-height: 100vh;
	}
</style>
